<template>
	<view class="issue">
		<!-- 品牌 -->
		<view class="brand">
			<u-form :model="brandForm" ref="brandRef" label-width="200rpx">
				<u-form-item label="机械">
					<view>
						<text class="mechan" :class="{seActive:index === meAll}" v-for="(item,index) in mechan"
							:key="item.id" @click="doMechan(index)">{{item.name}}</text>
					</view>
				</u-form-item>
				<u-form-item label="品牌">
					<view>
						<text>{{ brandForm.brand }}</text>
						<text class="alter" @click="brandShow = true">修改</text>
					</view>
				</u-form-item>
				<u-form-item label="型号">
					<view>
						<text>{{ brandForm.model }}</text>
						<text class="alter" @click="modelShow = true">请选择</text>
					</view>
				</u-form-item>
				<u-form-item label="出厂时间">
					<view>
						<text>{{ brandForm.time }}</text>
						<text class="alter" @click="timeShow = true">请选择</text>
					</view>
				</u-form-item>
				<u-form-item label="联系电话" border="false">
					<view class="inpt">
						<u-input v-model="brandForm.phone" :clearable="false" placeholder="填写您的手机号" input-align='right'
							:focus="focus" />
						<text class="amend" @click="intFocus">点此修改</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 价格 -->
		<view class="price">
			<u-form :model="priceForm" ref="priceRef" label-width="200rpx">
				<u-form-item label="价格">
					<view class="inpt">
						<u-input v-model="priceForm.price" :clearable="false" placeholder="请填写" input-align='right' />
						<text>/万</text>
					</view>
				</u-form-item>
				<u-form-item label="小时数">
					<view class="inpt">
						<u-input v-model="priceForm.hour" :clearable="false" placeholder="例如: 3000"
							input-align='right' />
						<text>/小时</text>
					</view>
				</u-form-item>
				<u-form-item label="是否带过锤">
					<text class="inquiry" :class="{seActive:index === inqIndex}" v-for="(item,index) in inpuirys"
						:key="index" @click="doinColor(index)">{{item.name}}</text>
				</u-form-item>
			</u-form>
		</view>
		<!-- 其他 -->
		<view class="else">
			<view class="title">其他<text>(可多选,虚假信息将做封号处理)</text></view>
			<view class="tishi">
				<u-icon class="icon" name="arrow-down-fill" color="#ff1930" size="28"></u-icon>
				只有机主可以选择[机主直卖],二手中介选择将做封号处理
			</view>
			<view class="choice">
				<text class="tagce" :class="{seActive:tagIndex == index}" v-for="(item,index) in taglist" :key="index"
					@click="doTag(index)">{{item.name}}</text>
			</view>
			<u-form :model="areaParams" ref="uForm" label-width="200rpx">
				<u-form-item label="设备地点">
					<view>
						<text>{{ areaParams.region}}</text>
						<text class="alter" @click="areaShow = true">修改</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 介绍 -->
		<view class="induce">
			<u-form :model="induceForm" ref="induceRef" :border-bottom="false">
				<u-form-item label="详细介绍" label-position="top" :border-bottom="false">
					<u-input v-model="induceForm.specific" type="textarea" border="true" height="180"
						auto-height="false" :clearable="false" placeholder="请在此描述你对设备的具体要求,如具体机型、预算、使用小时数、年限、设备来源等" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 照片 -->
		<view class="photo">
			<view class="title">设备照片<text>(请如实上传照片,为你加分,最多12张)</text></view>
			<view>
				<u-upload ref="uUpload" :action="action" :auto-upload="false"></u-upload>
			</view>
		</view>
		<!-- 确认提交 -->
		<u-button shape="circle" type="primary" size="medium" class="btn">确认提交</u-button>

		<!-- 品牌弹出层 -->
		<u-popup v-model="brandShow" mode="right" width="500rpx">
			<view class="select">
				<!-- 上 -->
				<view class="select-box">
					<view class="title">热门品牌</view>
					<view class="botder"></view>
					<view class="brand-box">
						<view class="brand-item" v-for="(item,index) in brandlist" :key="index" @click="doBrand(index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 下 -->
				<view class="select-box">
					<view class="title">其他品牌</view>
					<view class="botder"></view>
					<view class="brand-box">
						<view class="brand-item">小松</view>
						<view class="brand-item">小松</view>
						<view class="brand-item">小松</view>
						<view class="brand-item">小松</view>
						<view class="brand-item">小松</view>
						<view class="brand-item">小松</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 型号弹出层 -->
		<u-popup v-model="modelShow" mode="right" width="500rpx">
			<!-- 输入框 -->
			<view class="make">
				<view class="title">你可以手动填写型号<text class="txt">(不要写品牌)</text></view>
				<view class="make-int">
					<u-input v-model="modelVal" type="text" placeholder="例如ZX200-3" border="true"></u-input>
					<button size="mini" class="make-btn" @click="doModelVal">点此提交</button>
				</view>
			</view>
			<!-- 型号列表 -->
			<view class="model-list">
				<view class="moder-item">ZXC55USR-5A</view>
				<view class="moder-item">ZXC55USR-5A</view>
				<view class="moder-item">ZXC55USR-5A</view>
			</view>
		</u-popup>
		<!-- 出厂弹出层 -->
		<u-popup v-model="timeShow" mode="right" width="500rpx">
			<view class="times">
				<u-radio-group width="50%" class="rad">
					<u-radio @change="radioChange" v-for="(item, index) in timelist" :key="index" :name="item.name">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</u-popup>
		<!-- 地区弹出层 -->
		<u-picker mode="region" v-model="areaShow" @confirm="areaConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brandForm: { // 品牌
					brand: '其他',
					model: 'XFT990',
					time: '2022-12-1',
					phone: '',
				},
				priceForm: { // 价格
					price: '',
					hour: ''
				},
				induceForm: { // 介绍
					specific: ''
				},
				inpuirys: [
					{ name: '带过锤' },
					{ name: '没带过' }
				],
				areaParams: {
					region: ''
				},
				inqIndex: '',
				tagIndex: '',
				modelVal: '', // 型号输入
				elseStatus: '2',
				mechan: [],
				meAll: '',
				meIds: '1,2',
				brandId: 0,
				mechanId: 0,
				timelist: [], // 出厂时间列表
				taglist: [],
				brandlist: [],
				action: 'http://www.example.com/upload',
				focus: false,
				brandShow: false, // 控制品牌弹出层
				modelShow: false,
				timeShow: false,
				areaShow: false,

			};
		},
		onLoad() {
			this.init()
			this.getBrand()
			// this.getModel()
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.brandForm.time = e;
				this.timeShow = false;
			},
			areaConfirm(e) {
				this.areaParams.region = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			intFocus() {
				this.brandForm.phone = '';
				this.focus = true;
			},
			// 初始化
			init() {
				let _this = this
				_this.$api.goodsInit({

				}).then(res => {
					this.mechan = res.data.classlist
					this.timelist = res.data.timelist
					this.taglist = res.data.taglist
				});
			},
			// 机械
			doMechan(index) {
				this.meAll = index;
				this.meIds = this.mechan[index].goodbrand_ids
				this.mechanId = this.mechan[index].id
				this.getBrand()
			},
			doTag(index) {
				this.tagIndex = index
			},

			// 请求品牌信息
			getBrand() {
				let _this = this
				_this.$api.goodsBrand({
					ids: this.meIds
				}).then(res => {
					console.log(res);
					this.brandlist = res.data.list
				});
			},
			// 品牌
			doBrand(index) {
				console.log(index);
				this.brandId = this.brandlist[index].id
				this.brandForm.brand = this.brandlist[index].name
				this.getModel()
				this.brandShow = false
			},
			// 请求型号信息
			getModel() {
				let _this = this
				_this.$api.goodsModel({
					cid: this.mechanId,
					bid: this.brandId
				}).then(res => {
					console.log(res);
				});
			},
			// 型号输入提交
			doModelVal() {
				this.brandForm.model = this.modelVal
				this.modelVal = ''
				this.modelShow = false
			},
			// 
			doinColor(index) {
				this.inqIndex = index;
				console.log(index);
			}

		}
	};
</script>

<style lang="scss" scoped>
	.issue {

		padding: 0 20rpx;
		background-color: #f3f3f3;
		overflow: hidden;

		// 相同样式
		.brand,
		.price,
		.else,
		.induce {
			padding-left: 20rpx;
			background-color: #fff;
		}

		.alter {
			color: #8f9090;
			margin-left: 20rpx;
		}

		.seActive {
			background-color: #fc4b3d;
			color: #fff !important;
			border: 0 !important;
		}


		/deep/.u-form-item__body {
			display: flex;
			justify-content: space-between;
			padding-right: 40rpx;
		}

		/deep/.u-form-item--right {
			flex: unset;
		}

		// 品牌
		.brand {
			margin-top: 10rpx;
			height: 530rpx;
			margin: 20rpx 0;

			.mechan {
				display: inline-block;
				width: 120rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-left: 20rpx;
				border: 1px solid #bbbebc;
			}


			.inpt {
				display: flex;

				.amend {
					margin-left: 20rpx;
					color: #1f7ac0;
				}
			}
		}

		// 价格
		.price {

			.inpt {
				display: flex;
				align-items: center;

			}

			.inquiry {
				display: inline-block;
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 50rpx;
				border: 1px solid #d8d8d8;
				color: #989898;
				margin-left: 30rpx;
			}



		}

		// 其他
		.else {
			// height: 400rpx;

			.title {
				padding: 30rpx 0;

				text {
					font-size: 24rpx;
				}
			}

			.tishi {
				font-size: 24rpx;
				color: #919191;
				margin-bottom: 20rpx;

				.icon {
					margin-right: 10rpx;
				}
			}

			.choice {
				// height: 140rpx;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				flex-wrap: wrap;
				padding-right: 40rpx;


				.tagce {
					width: 160rpx;
					height: 60rpx;
					text-align: center;
					line-height: 50rpx;
					border: 1px solid #d8d8d8;
					color: #989898;
				}


			}

			.site {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f2f3f6;
				padding: 20rpx 0;
				height: 120rpx;
				padding-right: 40rpx;
			}
		}



		// 照片
		.photo {
			margin-top: 20rpx;
			margin-bottom: 120rpx;
			background-color: #fff;
			padding: 20rpx;

			.title {
				margin-bottom: 20rpx;

				text {
					color: #989898;
				}
			}
		}

		// 确认提交
		.btn {
			z-index: 9;
			position: fixed;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%);

		}

		// 品牌弹出层
		.select {
			padding: 20rpx;
			text-align: center;

			.select-box {
				.title {
					color: #b28550;
					font-size: 32rpx;
					padding-bottom: 5rpx;
					border-bottom: 1px solid #b28550;
				}

				.botder {
					width: 140rpx;
					height: 5rpx;
					background-color: #b28550;
					margin: 0 auto;
				}

				.brand-box {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}

				.brand-box {
					margin-top: 20rpx;

					.brand-item {
						width: 140rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						background-color: #eeeeee;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}

		// 型号弹出层
		.make {
			padding: 20rpx;
			background-color: #f2f9fe;

			.title {
				.txt {
					margin-left: 10rpx;
					color: #a40000;
				}
			}

			.make-int {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.make-btn {
					width: 180rpx;
					margin-left: 10rpx;
					background-color: #2a315b;
					color: #fff;
					padding: 0 10rpx;
				}
			}
		}

		.model-list {
			padding-left: 10rpx;

			.moder-item {
				height: 90rpx;
				line-height: 60rpx;
				padding: 20rpx;
				border-bottom: 1px solid #e2e2e2;
			}
		}

		// 出厂时间弹出层
		.times {
			padding: 30rpx;

			/deep/.u-radio {
				margin-bottom: 40rpx;
			}
		}

	}
</style>
